<template>
	<view class="">
		<view class="seach">
			<u-navbar :is-back="false" :border-bottom="false" :background="background">
				<view class="d-flex a-center j-sb w-100">
					<view class="span-5 pl-2 py-2"  @click="backtrack_img">
						<u-icon name="arrow-left" color="#ffffff" size="40"></u-icon>
					</view>
					<view class="font-lg font-weight text-white">店铺访客</view>
					<view class="span-5"></view>
				</view>
			</u-navbar>
		</view>
	
		<scroll-view scroll-y="true"  :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolower"
		 refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="h_100">
				<view class="mt-5" v-if="u_loadmore">
					<u-loadmore status="loading" icon-type="circle" />
				</view>
				<view v-else class="h_100">
					<view class="h_100 d-flex j-center a-center" v-if="visitors.length==0">
						<view class="text-center">
							<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
							<view class="">暂无访客</view>
						</view>
					</view>
					<view class="" v-else>
						<view class="py-4 px-2 bg-white d-flex j-sb a-center border-bottom" v-for="(item,index) in visitors" :key='index'>
							<view class="">
								<view class="d-flex a-center">
									<view class=""><image class="terrace_img rounded-circle-50" :src="item.user_picture?item.user_picture:'../../static/images/order/default-photo.png'" mode=""></image></view>
									<view class="font-35 text-000 ml-2">
										<view class="font-weight">{{item.user_name}}</view>
									</view>
								</view>
								<view class="text-999 font-28 ml-1">最近来访:{{item.formatted_visit_time}}</view>
							</view>
							<view class="" v-if="user.kehu_edit">
								<view class="check" @click="checkTo(item)">审核</view>
							</view>
						</view>
					</view>
					<view class="py-2" v-if="!visitors.length<=0">
						<view class="" v-if="visitors.length==total"  @click="loadmores">
							<u-loadmore status="nomore" icon-type="circle" />
						</view>
						<view class="" v-else >
							<u-loadmore status="loading" icon-type="circle" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	const SIZE = 10
	export default{
		data(){
			return {
				u_loadmore:true, // 加载中
				background: {
					background: '#fa7226',
					backgroundSize: 'cover',
				},
				visitors:"", // 店铺访客
				scrollHeight:0, // 屏幕高度
				
				more:1, // 第几页
				count:10, // 条数
				total:0,// 总条数
				old: {
					scrollTop: 0
				},
				scrollTop:0,
				firstFocus:false,// 下拉刷新
				triggered: false, // 下拉刷新
				
				timers:null, // 倒计时
				
				user: {}
			}
		},
		onReady() {
			let _this=this;
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						console.log(res)
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods:{
			// 下拉刷新 自定义下拉刷新控件被下拉
			 onPulling(e) {
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			},
			// 审核
			checkTo(item){
				uni.navigateTo({
					url:`/pagesB/client/check?visitor='访客'`
				})
				uni.setStorageSync("terrace_item",JSON.stringify(item))
			},
			// 返回
			backtrack_img(){
				uni.navigateBack({
					delta:1
				})
			},
			
			// 加载数据
			getData(){
				this.$H.post("v2/store/visitors",{
					pagination:{
						count:this.count,
						page:this.more
					},
				}).then(res=>{
					this.visitors=res.data
				})
			},
			// 回到顶部
			loadmores(){
				this.scrollTop = this.old.scrollTop
				console.log(this.scrollTop)
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			// 上拉加载函数
			scrolltolower(e){
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if(that.terrace.length==that.total){
					return
				}else{
					setTimeout(()=>{
					    that.getData()
					},1000)
				}
			},
			// 滚动时触发
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},
		},
		onShow() {
			this.timers=setInterval(()=>{
				this.$H.post("v2/store/visitors",{
					pagination:{
						count:this.count,
						page:this.more
					},
				}).then(res=>{
					this.u_loadmore=false
					this.visitors=res.data
				})
			},5000)	
			
			let that=this
			if(uni.getStorageSync("toggle_default")){
				that.user=uni.getStorageSync("users") || {}
			}else if(uni.getStorageSync("toggle_demo")){
				that.user=uni.getStorageSync("users_demo") || {}
			}else{
				that.user=uni.getStorageSync("users") || {}
			}
		},
		onUnload() {
			if(this.timers) {
				clearTimeout(this.timers);  
				this.timers = null;  
			} 
		},
		onHide() {
			if(this.timers) {
				clearTimeout(this.timers);  
				this.timers = null;  
			}  
		},
		onLoad() {
			this.u_loadmore=false
			
			this.$H.post("v2/store/visitors",{
				pagination:{
					count:this.count,
					page:this.more
				},
			}).then(res=>{
				this.u_loadmore=false
				this.total=res.paginated.total
				this.visitors=res.data
			})
		}
	}
</script>

<style>
	.terrace_img{
		width: 120upx;
		height: 120upx;
	}
	.check{
		width: 150upx;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		font-size: 35upx;
		color: #ff9f30;
		border-radius: 10upx;
		border: 1px solid #EAEAEA;
	}
</style>
